<script setup>
import {ref} from 'vue'
defineProps(['bannerList'])
let activeIndex = ref(0)
const getSwiperIndex = (e)=>{
	activeIndex.value = e.detail.current
}
</script>

<template>
<!-- 	indicator-color="white"
	indicator-active-color="#f3514f" -->
	<view class="swiper-box">
		<swiper :autoplay="true"
		:interval="2000" 
		:indicator-dots="false"
		:circular="true"
		class="swiper-content"
		@change="getSwiperIndex"
		>
			<swiper-item v-for="item in bannerList" v-bind:key="item.sort" class="swiper-item">
				<navigator :url="`/pagesGoods/detail/detail?goodId=${item.id}`" class="nav" hover-class="none">
					<image :src="item.imageUrl" mode="scaleToFill" show-menu-by-longpress class="image"></image>
				</navigator>				
			</swiper-item>
		</swiper>
		<view class="dots">
			<text v-for="(item,index) in bannerList"
			 v-bind:key="item.id" 
			 :class="{activeDots:activeIndex===index}" 
			 class="dot"></text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.swiper-box{
	border-radius: 10rpx;
	overflow: hidden;
	height: 360rpx;
	margin-top: 16rpx;
	.swiper-content{
		height: 360rpx;
		.swiper-item{
			.nav{
				height: 360rpx;
				.image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
		}
	}	
	position: relative;
	.dots{
		position: absolute;
		top:95%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		.dot{
			margin: 0 15rpx;
			width: 60rpx;
			height: 8rpx;			
			background: #efefef;
		}
		.activeDots{
			background: #F3514F;
		}
	}
}
</style>
